/*
 * @Author: xiaosihan 
 * @Date: 2024-03-10 08:37:37 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-17 22:12:15
 */


import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./windowsInstallModal.module.less";
import { Button, Checkbox, Modal, Table } from "antd";
import homeStore from "@views/home/homeStore";
import config from "@views/home/config/config";

interface Iprops {
    children?: ReactNode
}

// 窗型安装弹窗
export default function WindowsInstallModal(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [open, setOpen] = useState(false);
    const [showState, setShowState] = useState(homeStore.showState);
    const [dataSource, setDataSource] = useState<any>([]);

    const [dragging, setDragging] = useState(false);
    const [offsetX, setOffsetX] = useState(0);
    const [offsetY, setOffsetY] = useState(0);
    const modalRef = useRef<HTMLDivElement>(null);
    const [activeInstall, setActiveInstall] = useState<Array<string>>([]);

    useEffect(() => {

    }, []);

    // 根据已完成未完成的值计算颜色
    const getFontColor = (v1: number, v2: number) => {
        if (v1 === 0) {
            return "#ffffff"
        } else if (v1 === v2) {
            return "#00B050"
        } else {
            return "#FFC000"
        }
    }

    useEffect(() => autorun(() => {
        setShowState(homeStore.showState);
        const { buildData } = homeStore;
        const activeInstall = toJS(homeStore.activeInstall);
        setActiveInstall(activeInstall);
        const dataSource = buildData.map((b, i) => {

            return {
                key: i,
                floor: b.floorNo,

                sum_south_kuang: b.south.sum_kuang,
                sum_south_saifeng: b.south.sum_saifeng,
                sum_south_shan: b.south.sum_shan,
                sum_south_boli: b.south.sum_boli,
                sum_south_mifj: b.south.sum_mifj,

                south_kuang: b.south.kuang,
                south_saifeng: b.south.saifeng,
                south_shan: b.south.shan,
                south_boli: b.south.boli,
                south_mifj: b.south.mifj,

                sum_north_kuang: b.north.sum_kuang,
                sum_north_saifeng: b.north.sum_saifeng,
                sum_north_shan: b.north.sum_shan,
                sum_north_boli: b.north.sum_boli,
                sum_north_mifj: b.north.sum_mifj,

                north_kuang: b.north.kuang,
                north_saifeng: b.north.saifeng,
                north_shan: b.north.shan,
                north_boli: b.north.boli,
                north_mifj: b.north.mifj,

                sum_east_kuang: b.east.sum_kuang,
                sum_east_saifeng: b.east.sum_saifeng,
                sum_east_shan: b.east.sum_shan,
                sum_east_boli: b.east.sum_boli,
                sum_east_mifj: b.east.sum_mifj,

                east_kuang: b.east.kuang,
                east_saifeng: b.east.saifeng,
                east_shan: b.east.shan,
                east_boli: b.east.boli,
                east_mifj: b.east.mifj,

                sum_west_kuang: b.west.sum_kuang,
                sum_west_saifeng: b.west.sum_saifeng,
                sum_west_shan: b.west.sum_shan,
                sum_west_boli: b.west.sum_boli,
                sum_west_mifj: b.west.sum_mifj,

                west_kuang: b.west.kuang,
                west_saifeng: b.west.saifeng,
                west_shan: b.west.shan,
                west_boli: b.west.boli,
                west_mifj: b.west.mifj,

                sum_end_kuang: b.end.sum_kuang,
                sum_end_saifeng: b.end.sum_saifeng,
                sum_end_shan: b.end.sum_shan,
                sum_end_boli: b.end.sum_boli,
                sum_end_mifj: b.end.sum_mifj,

                end_kuang: b.end.kuang,
                end_saifeng: b.end.saifeng,
                end_shan: b.end.shan,
                end_boli: b.end.boli,
                end_mifj: b.end.mifj,
            }
        });

        setDataSource(dataSource);
    }), []);


    const columns = [
        {
            title: '层',
            dataIndex: 'floor',
            key: 'floor',
        },
        {
            title: '安装状态',
            dataIndex: 'south',
            key: 'south',
            render: (d: any, data: any) => {
                return <div>
                    {
                        config.installState.map((s, i) => {
                            return <div key={i} >{s.installState}</div>
                        })
                    }
                </div>
            }
        },
        {
            title: '南向',
            children: [
                {
                    title: '完成数量/总数量',
                    dataIndex: 'south',
                    key: 'south',
                    render: (d: any, data: any, i: number) => {
                        // return (
                        //     <span>
                        //         <span>{data.south_kuang || 0}/{data.sum_south_kuang || 0}</span><br />
                        //         <span>{data.south_saifeng || 0}/{data.sum_south_saifeng || 0}</span> <br />
                        //         <span>{data.south_shan || 0}/{data.sum_south_shan || 0}</span> <br />
                        //         <span>{data.south_boli || 0}/{data.sum_south_boli || 0}</span> <br />
                        //         <span>{data.south_mifj || 0}/{data.sum_south_mifj || 0}</span> <br />
                        //     </span>
                        // );

                        return (
                            <span>
                                <span style={{ color: getFontColor(data.south_kuang || 0, data.sum_south_kuang || 0) }} >{data.south_kuang || 0}/{data.sum_south_kuang || 0}</span><br />
                                <span style={{ color: getFontColor(data.south_saifeng || 0, data.sum_south_saifeng || 0) }} >{data.south_saifeng || 0}/{data.sum_south_saifeng || 0}</span> <br />
                                <span style={{ color: getFontColor(data.south_shan || 0, data.sum_south_shan || 0) }} >{data.south_shan || 0}/{data.sum_south_shan || 0}</span> <br />
                                <span style={{ color: getFontColor(data.south_boli || 0, data.sum_south_boli || 0) }} >{data.south_boli || 0}/{data.sum_south_boli || 0}</span> <br />
                                <span style={{ color: getFontColor(data.south_mifj || 0, data.sum_south_mifj || 0) }} >{data.south_mifj || 0}/{data.sum_south_mifj || 0}</span> <br />
                            </span>
                        );

                    }
                }
            ]
        },
        {
            title: '北向',
            children: [
                {
                    title: '完成数量/总数量',
                    dataIndex: 'north',
                    key: 'north',
                    render: (d: any, data: any, i: number) => {
                        return (
                            <span>
                                <span style={{ color: getFontColor(data.north_kuang || 0, data.sum_north_kuang || 0) }}>{data.north_kuang || 0}/{data.sum_north_kuang || 0}</span><br />
                                <span style={{ color: getFontColor(data.north_saifeng || 0, data.sum_north_saifeng || 0) }}>{data.north_saifeng || 0}/{data.sum_north_saifeng || 0}</span><br />
                                <span style={{ color: getFontColor(data.north_shan || 0, data.sum_north_shan || 0) }}>{data.north_shan || 0}/{data.sum_north_shan || 0}</span><br />
                                <span style={{ color: getFontColor(data.north_boli || 0, data.sum_north_boli || 0) }}>{data.north_boli || 0}/{data.sum_north_boli || 0}</span><br />
                                <span style={{ color: getFontColor(data.north_mifj || 0, data.sum_north_mifj || 0) }}>{data.north_mifj || 0}/{data.sum_north_mifj || 0}</span><br />
                            </span>
                        );
                    }
                }
            ]
        },
        {
            title: '东向',
            children: [
                {
                    title: '完成数量/总数量',
                    dataIndex: 'east',
                    key: 'east',
                    render: (d: any, data: any, i: number) => {
                        return (
                            <span>
                                <span style={{ color: getFontColor(data.east_kuang || 0, data.sum_east_kuang || 0) }}>
                                    {data.east_kuang || 0}/{data.sum_east_kuang || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.east_saifeng || 0, data.sum_east_saifeng || 0) }}>
                                    {data.east_saifeng || 0}/{data.sum_east_saifeng || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.east_shan || 0, data.sum_east_shan || 0) }}>
                                    {data.east_shan || 0}/{data.sum_east_shan || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.east_boli || 0, data.sum_east_boli || 0) }}>
                                    {data.east_boli || 0}/{data.sum_east_boli || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.east_mifj || 0, data.sum_east_mifj || 0) }}>
                                    {data.east_mifj || 0}/{data.sum_east_mifj || 0}
                                </span>
                                <br />
                            </span>
                        );

                    }
                }
            ]
        },
        {
            title: '西向',
            children: [
                {
                    title: '完成数量/总数量',
                    dataIndex: 'west',
                    key: 'west',
                    render: (d: any, data: any, i: number) => {
                        return (
                            <span>
                                <span style={{ color: getFontColor(data.west_kuang, data.sum_west_kuang) }}>
                                    {data.west_kuang || 0}/{data.sum_west_kuang || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.west_saifeng, data.sum_west_saifeng) }}>
                                    {data.west_saifeng || 0}/{data.sum_west_saifeng || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.west_shan, data.sum_west_shan) }}>
                                    {data.west_shan || 0}/{data.sum_west_shan || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.west_boli, data.sum_west_boli) }}>
                                    {data.west_boli || 0}/{data.sum_west_boli || 0}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.west_mifj, data.sum_west_mifj) }}>
                                    {data.west_mifj || 0}/{data.sum_west_mifj || 0}
                                </span>
                            </span>
                        );
                    }
                }
            ]
        },
        {
            title: '收尾',
            children: [
                {
                    title: '完成数量/总数量',
                    dataIndex: 'end',
                    key: 'end',
                    render: (d: any, data: any, i: number) => {
                        return (
                            <span>
                                <span style={{ color: getFontColor(data.end_kuang, data.sum_end_kuang) }}>
                                    {(data.end_kuang || 0)}/{(data.sum_end_kuang || 0)}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.end_saifeng, data.sum_end_saifeng) }}>
                                    {(data.end_saifeng || 0)}/{(data.sum_end_saifeng || 0)}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.end_shan, data.sum_end_shan) }}>
                                    {(data.end_shan || 0)}/{(data.sum_end_shan || 0)}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.end_boli, data.sum_end_boli) }}>
                                    {(data.end_boli || 0)}/{(data.sum_end_boli || 0)}
                                </span>
                                <br />
                                <span style={{ color: getFontColor(data.end_mifj, data.sum_end_mifj) }}>
                                    {(data.end_mifj || 0)}/{(data.sum_end_mifj || 0)}
                                </span>
                            </span>
                        );
                    }
                }
            ]
        },

    ]

    // const dataSource = [
    //     {
    //         key: '1',
    //         'floor',
    //         'south_kuang',
    //         'south_saifeng',
    //         'south_shan',
    //         'south_boli',
    //         'south_mifj',
    //         'north_kuang',
    //         'north_saifeng',
    //         'north_shan',
    //         'north_boli',
    //         'north_mifj',
    //         'east_kuang',
    //         'east_saifeng',
    //         'east_shan',
    //         'east_boli',
    //         'east_mifj',
    //         'west_kuang',
    //         'west_saifeng',
    //         'west_shan',
    //         'west_boli',
    //         'west_mifj',
    //      }
    // ]

    useEffect(() => {
        function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
            if (modalRef.current) {
                if (e.target !== modalRef.current) {
                    return;
                }
                setDragging(true);
                //@ts-ignore
                const rect = modalRef.current.parentNode.parentNode.getBoundingClientRect();
                if (rect) {
                    //@ts-ignore
                    setOffsetX(e.clientX - (modalRef.current.parentNode!.parentNode as HTMLDivElement).offsetLeft);
                    //@ts-ignore
                    setOffsetY(e.clientY - (modalRef.current.parentNode!.parentNode as HTMLDivElement).offsetTop);
                }
            }
        }

        function handleMouseMove(e: MouseEvent) {
            if (!dragging) return;
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            if (modalRef.current) {
                //@ts-ignore
                modalRef.current.parentNode.parentNode.style.left = `${x}px`;
                //@ts-ignore
                modalRef.current.parentNode.parentNode.style.top = `${y}px`;
            }
        }

        function handleMouseUp() {
            setDragging(false);
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }

        if (open && modalRef.current) {
            //@ts-ignore
            modalRef.current.addEventListener('mousedown', handleMouseDown);
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        } else {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }

        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
            if (modalRef.current) {
                //@ts-ignore
                modalRef.current.removeEventListener('mousedown', handleMouseDown);
            }
        };
    }, [open, dragging]);

    return (
        <>
            <table className={styles.installTable} border={1}>
                <tbody>
                    <tr>
                        <td width={120} align="center" >安装状态</td>
                        <td>
                            <div className={styles.state}>
                                <Table
                                    bordered
                                    rowClassName={() => styles.state_table}
                                    size="small"
                                    columns={[
                                        {
                                            title: "颜色", key: "installColor", dataIndex: "installColor", width: 40,
                                            render: (color) => {
                                                return (
                                                    <span
                                                        style={{ backgroundColor: color }}
                                                        className={styles.state_item_color}
                                                    ></span>
                                                );
                                            }
                                        },
                                        {
                                            title:
                                                <Checkbox
                                                    indeterminate={![0, config.installState.length].includes(activeInstall.length)}
                                                    checked={config.installState.length === activeInstall.length}
                                                    onChange={() => {
                                                        homeStore.checkAllInstallType();
                                                    }}
                                                >
                                                    <span className={styles.state_item}>
                                                        <span className={styles.state_item_name} >全选</span>
                                                    </span>
                                                </Checkbox>
                                            , key: "installState", dataIndex: "installState",
                                            render: (n) => {
                                                return (
                                                    <Checkbox
                                                        checked={activeInstall.includes(n)}
                                                        onChange={(e) => {
                                                            homeStore.checkInstallType(n);
                                                        }}
                                                    >
                                                        <span className={styles.state_item_name} >{n}</span>
                                                    </Checkbox>
                                                );
                                            }
                                        }
                                    ]}
                                    dataSource={config.installState}
                                    pagination={false}
                                />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" >详细报表</td>
                        <td>
                            <Button
                                type="primary"
                                onClick={() => setOpen(true)}
                            >查看报表</Button>
                        </td>
                    </tr>
                </tbody>

            </table>

            <Modal
                open={open}
                className={styles.windowsInstallModal}
                footer={false}
                centered={true}
                width={1000}
                maskClosable={false}
                onCancel={() => setOpen(false)}
            >
                <div
                    style={{
                        cursor: "pointer",
                        paddingTop: 20,
                        marginTop: -20
                    }}
                    ref={modalRef}
                    className="draggable-modal-header">
                    <div className={styles.title} >窗型已安装状态数量报表</div>

                </div>
                <div className={styles.table} >
                    <Table
                        bordered
                        size="small"
                        columns={columns}
                        dataSource={dataSource}
                        pagination={false}
                    />
                </div>
            </Modal>

        </>
    );

}